<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="" v-show="!user_activity.length">
				<text>该用户未参与活动</text>
			</view>
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in user_activity" :key="item.activityId" :right-options="options"
					@click="exit_user_activity($event,item)">

					<view class="" @click="toDetail(item.activityId)">
						<view class="activity-title">
							<text>活动{{index+1}}:{{ item.activityTitle }}</text>
						</view>
						<view class="activity-image-container">
							<image class="activity-image" :src="item.activityImage" mode="aspectFill"></image>
						</view>
					</view>

				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.get_user_activity(this.id);
			console.log("参数id：" + option.id); //打印出上个页面传递的参数。
			this.getActivities() //获取所有活动信息
		},
		data() {
			return {
				id: 0,
				user_activity: [],
				options: [{
					text: '退出',
					style: {
						backgroundColor: '#dd9d68'
					}
				}],
			}
		},
		methods: {
			...mapMutations('admin', ['getActivities']),
			toDetail(id) {
				// console.log("id:" + id);
				uni.navigateTo({
					url: `/pages/activity/activity-detail/activity-detail?id=${id}`,
				});
			},
			get_user_activity(user_id) {
				uni.request({
					url: 'http://localhost:3000/users/activity_attend',
					method: 'GET',
					data: {
						id: user_id
					},
					success: (res) => {
						this.user_activity = res.data
						console.log("res:", res)
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			exit_user_activity(e, item) {
				uni.request({
					url: 'http://localhost:3000/admin/activity_attend/delete',
					method: 'post',
					data: [item.activityId, this.id],
					success: (res) => {
						console.log("插入数据：", res);
						uni.showToast({
							title: `你已成功退出活动！`,
							icon: "success",
						});
						this.get_user_activity(this.id);
					},
					fail: (res) => {
						console.log("请求失败：", res)
					}
				})
			},
		},
		computed: {

		},
	}
</script>

<style scoped lang="scss">
	.scroll-view {
		height: 100%;
		/* 或者设置为具体的高度值 */
	}


	.activity-item {
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ddd;
		padding-bottom: 30rpx;
	}

	.activity-title {
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.activity-image-container {
		width: 100%;
		height: 400rpx;
		/* 根据需要调整图片高度 */
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activity-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 使图片保持比例填充容器 */
	}

	.activity-description {
		font-size: 36rpx;
		color: #333;
		line-height: 1.5;
		text-align: justify;
	}
</style>